<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
	template="/templates/masterPage.xhtml">
	<ui:define name="pageHeader">
		<div>
			<h1>Competencies</h1>
		</div>
	</ui:define>
	<ui:define name="content">
		<div>
			<h:form id="form">
				<div>
					<p:growl id="growl" showDetail="true" />

					<p:toolbar id="toolbar">
						<p:toolbarGroup align="left">
							<p:commandButton title="Create new root competency" icon="ui-icon-document-b"
								actionListener="#{competenciesBean.beforeNewRootCompetency}" update="growl newDialogLayout" />
							<p:commandButton title="Create new competency" icon="ui-icon-document"
								actionListener="#{competenciesBean.beforeNewCompetency}" update="growl newDialogLayout" />
							<p:commandButton title="Edit selected competency" icon="ui-icon-pencil"
								actionListener="#{competenciesBean.beforeUpdateCompetency}" update="growl editDialogLayout" />
							<p:commandButton title="Refresh competencies tree" icon="ui-icon-arrowrefresh-1-w" update="competencyTree"
								actionListener="#{competenciesBean.refresh}" />
							<p:commandButton title="Remove selected competency" icon="ui-icon-closethick"
								update="growl competencyTree cfrmRemvCmptDialog" actionListener="#{competenciesBean.beforeRemoveCompetency}" />
							<p:separator />
						</p:toolbarGroup>
					</p:toolbar>

					<p:treeTable value="#{competenciesBean.root}" var="node" selectionMode="single" dynamic="true" cache="false"
						selection="#{competenciesBean.selectedNode}" id="competencyTree">

						<p:ajax event="expand" listener="#{competenciesBean.onNodeExpand}" />
						<p:ajax event="collapse" listener="#{competenciesBean.onNodeCollapse}" />

						<p:column>
							<f:facet name="header">Competency name</f:facet>
							<h:outputText value="#{node.name}"></h:outputText>
						</p:column>
						<p:column>
							<f:facet name="header">Description</f:facet>
							<h:outputText value="#{node.description}"></h:outputText>
						</p:column>
						<p:column>
							<f:facet name="header">ID</f:facet>
							<h:outputText value="#{node.id}"></h:outputText>
						</p:column>
					</p:treeTable>

					<ui:insert name="new_competency_dialog">
						<ui:include src="/views/dialogs/newCompetency.xhtml" />
					</ui:insert>
					<ui:insert name="new_competency_dialog">
						<ui:include src="/views/dialogs/editCompetency.xhtml" />
					</ui:insert>
					<ui:insert name="confirm_remove_competency_dialog">
						<ui:include src="/views/dialogs/confirmRemoveCompetency.xhtml" />
					</ui:insert>
				</div>
			</h:form>
		</div>
	</ui:define>
</ui:composition>